<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title>表单3</title>
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<link rel="stylesheet" href="../css/mui.min.css">
		<link rel="stylesheet" href="../css/mui.picker.css">
		<link rel="stylesheet" href="../css/mui.poppicker.css">
		<link rel="stylesheet" href="../css/form.css">
		<link rel="stylesheet" href="../css/swiper.min.css">
		<script src="../fonts/iconfont.js"></script>
		<style>
			html,
			body {
				background-color: #efeff4;
			}
			
			.mui-bar-nav {
				background: white;
			}
			
			.mui-content {
				margin-top: 100px;
			}
			
			h5.mui-content-padded {
				margin-left: 3px;
				margin-top: 20px !important;
			}
			
			h5.mui-content-padded:first-child {
				margin-top: 12px !important;
			}
			
			.mui-btn {
				font-size: 16px;
				padding: 8px;
				margin: 3px;
			}
			
			.ui-alert {
				text-align: center;
				padding: 20px 10px;
				font-size: 16px;
			}
			
			* {
				-webkit-touch-callout: none;
				-webkit-user-select: none;
			}
			
			.formhide {
				display: none;
			}
			
			.diy_header {
				width: 100%;
				background: white;
				padding-bottom: 10px;
				border-bottom: 1px solid #cccccc;
				height: 100px;
				position: relative;
				margin-bottom: 20px;
				position: fixed;
				top: 0;
			}
			
			.diylabel input {
				color: #ababab;
				display: inline-block;
				width: 60%;
				background: none;
				border: none;
				border-bottom: solid 1px #d7d7d7;
				border-radius: 0;
				font-size: 14px;
			}
			
			.diylabel font {
				display: inline-block;
				width: 85px;
				text-align: left;
				font-size: 15px;
			}
			
			.model {
				text-align: center;
			}
			
			.mui-input {
				text-align: center;
			}
			
			.seach-user {
				width: 45%;
				text-align: center;
				color: #ffffff;
				display: inline-block;
				margin: 30px auto;
				background: #00af66;
				border-radius: 40px;
				line-height: 40px;
				height: 40px;
				margin-left: 5%;
			}
			
			.seach-user2 {
				width: 45%;
				text-align: center;
				color: #ffffff;
				display: inline-block;
				margin: 30px auto;
				background: orangered;
				border-radius: 40px;
				line-height: 40px;
				height: 40px;
			}
			
			.seach-user2:active {
				color: #cccccc;
			}
			
			.swiper-container {
				width: 100%;
				height: 200px;
			}
			
			.icon {
				/* 通过设置 font-size 来改变图标大小 */
				width: 1.8em;
				height: 1.8em;
				/* 图标和文字相邻时，垂直对齐 */
				vertical-align: -0.15em;
				/* 通过设置 color 来改变 SVG 的颜色/fill */
				fill: currentColor;
				/* path 和 stroke 溢出 viewBox 部分在 IE 下会显示
             normalize.css 中也包含这行 */
				overflow: hidden;
				color: #666666;
			}
			
			.img-wrap {
				height: 300px;
				margin-top: 10px;
			}
			
			.del-btn {
				overflow: hidden;
				position: relative;
				padding: 10px 0;
			}
			
			.del-btn a {
				position: absolute;
				right: 20px;
				width: 24px;
				height: 24px;
				top: 10px;
			}
			
			.del-btn a span {
				width: 100%;
				height: 100%;
			}
			
			.swiper-pagination {
				margin: 0 auto;
				position: static;
			}
			
			.swiper-pagination span {
				margin: 4px;
			}
			.tabbar{width:100%;height: 60px;line-height: 60px;margin-bottom: 10px;} 
			.tabbar span{
				display: inline-block;
				width: 48%;
				text-align: center;
			}
			.type-active{border-bottom: 2px solid #00af66;}
		</style>
	</head>

	<body>
		<div class="diy_header">
			<a class="mui-action-back mui-icon" style="padding-left: 1%;width:200px;height:200px;"><span class="mui-icon mui-icon-back" style="color: #333333;font-size: 26px;margin-top: 15px;"></span></a>
			<h3 style="margin: 0;padding: 0;position: absolute;bottom: 20px;padding-left: 3%;color: #333333;">种养殖录入</h3>

		</div>

		<div class="mui-content" id="plantAndBreedForm">
			<form id="form">
				<img src="../img/bp.png" width="100%" />
				<div class="tabbar">
					<span  v-bind:class="{'type-active': formtype==0 }">种植信息录入</span>
					<span  v-bind:class="{'type-active': formtype==1 }">养殖信息录入</span>
				</div>


				<div class="model">
					<label class="diylabel">
			<font>纬度</font>
		    <input v-model="wd" type="text" class="mui-input" placeholder="正在获取定位..." readonly="true">
		</label>
				</div>
				<div class="model">
					<label class="diylabel">
			<font>经度</font>
				<input v-model="jd" type="text" class="mui-input" placeholder="正在获取定位..." readonly="true">
		</label>
				</div>
				<div class="model">
					<label class="diylabel">
			<font>户主</font>
				<input type="text" class="mui-input" :value="fammername" readonly="true">
		</label>
				</div>

				<div class="model" v-bind:class="{formhide: formtype==1}">
					<label class="diylabel">
			<font>种植品种</font>
				<input id='plantPicker' type="text" class="mui-input" placeholder="点击选择种植品类" readonly="true">
		</label>
				</div>

				<div class="model">
					<label class="diylabel">
			<font>产品名称</font>
					<input v-model="des" type="text" class="mui-input" placeholder="请填写产品名称">
		</label>
				</div>

				<div class="model" v-bind:class="{formhide: formtype==0 }">
					<label class="diylabel">
			<font>养殖品种</font>
					<input id='breedPicker' type="text" class="mui-input" placeholder="点击选择养殖品类" readonly="true">
		</label>
				</div>

				<div class="model">
					<label class="diylabel">
			<font>产品等级</font>
					<input id='showLevelPicker' type="text" class="mui-input" placeholder="点击选择产品等级" readonly="true">
		</label>
				</div>

			

				<div class="model" v-bind:class="{formhide: formtype==1}">

					<label class="diylabel"><font>种植面积</font>
					<input style="width: 40%;"  v-model="scale" type="number" pattern="\d*"  class="mui-input" placeholder="请输入种植面积" />
					<span id="plantAreaPicker" style="display: inline-block;width: 20%;font-size: 14px;color: #ababab;">{{plantAreaName}}</span>
					</label>

				</div>

				<div class="model" v-bind:class="{formhide: formtype==0}">

					<label class="diylabel"><font>养殖数量</font>
					<input   v-model="scale" type="number" pattern="\d*"  class="mui-input" placeholder="请输入养殖数量" />
					
					</label>

				</div>

				<div class="model">

					<label class="diylabel"><font>预计产量</font>
					<input style="width: 40%;"  v-model="output" type="number" pattern="\d*"  class="mui-input" placeholder="请输入种植面积" />
					<span id="returnUnitPicker" style="display: inline-block;width: 20%;font-size: 14px;color: #ababab;">{{returnUnitName}}</span>
					</label>

				</div>
				
				
					<div class="model" v-bind:class="{formhide: formtype==0}">

					<label class="diylabel">
					<font>出栏日期</font>
					<input id='pickDateBtn' v-model="returndate" type="text" class="mui-input" placeholder="点击选择出栏日期" readonly="true">
					</label>

				</div>
				<div class="model" v-bind:class="{formhide: formtype==1}">

					<label class="diylabel"><font>预采收日期</font>
					<input id='pickDateBtn2' v-model="ycdate" type="text" class="mui-input" placeholder="点击选择预采收日期" readonly="true">
					</label>

				</div>
				<div class="model" v-bind:class="{formhide: formtype==1}">

					<label class="diylabel"><font>必采收日期</font>
					<input id='pickDateBtn3' v-model="bcdate" type="text" class="mui-input" placeholder="点击选择必采收日期" readonly="true">
					</label>

				</div>

				<div class="model">
					<label class="diylabel"><font>图像采集</font>
						
					</label>

				</div>
				<div class="img-wrap" v-show="photos.length>0">
					<!-- Swiper -->
					<div class="swiper-container">
						<div class="swiper-wrapper">
							<div class="swiper-slide" v-for="(item, index) in photos">
								<img :src="item.localurl" data-preview-src="" data-preview-group="1" style="width: 100%;height: 300px;">
							</div>

						</div>

					</div>

					<div class="del-btn">
						<div class="swiper-pagination"></div>
						<a href="javascript:void(0);" @click="delphoto(delNo)">

							<svg class="icon" aria-hidden="true">
								<use xlink:href="#icon-shanchu"></use>
							</svg>
						</a>
					</div>
			
				</div>

			</form>
			<a @click="savelocal" href="javascript:void(0);" class="seach-user">保存</a>
			<a @click="submitcheck" href="javascript:void(0);" class="seach-user2">提交</a>

			
		</div>
		<script src="../js/resource/mui.js"></script>
		<script src="../js/resource/mui.picker.js"></script>
		<script src="../js/resource/mui.poppicker.js"></script>
		<script src="../js/resource/city.data-3.js"></script>
		<script src="../js/resource/vue.js"></script>
		<script src="../js/resource/axios.js"></script>
		<script src="../js/resource/config.js"></script>
		<script src="../js/localInfoForm.js"></script>
		<script src="../js/resource/swiper.min.js"></script>
		<script type="text/javascript" charset="utf-8">
			var swiper = new Swiper('.swiper-container', {
				pagination: {
					el: '.swiper-pagination',

				},
				on: {
					slideChangeTransitionEnd: function() {
						plantAndBreedForm.delNo = this.activeIndex
					},
				},
				observer: true
			});
			document.addEventListener("plusready", onPlusReady, false);

			function onPlusReady() {
				//plantAndBreedForm.getGPS()
			}
			(function($, doc) {
				var level = [];
				var breed = [];
				var plant = [];
				var fammer = [];
				$.init();
				$.ready(function() {

					//时间选择器	
					doc.getElementById("pickDateBtn").addEventListener('tap', function() {
						var dDate = new Date();
						plus.nativeUI.pickDate(function(e) {
							var d = e.date;
							plantAndBreedForm.returndate = d.getFullYear() + "-" + (d.getMonth() + 1) + "-" + d.getDate()
						}, function(e) {
							doc.getElementById("pickDateBtn").value = '出栏日期'
						}, {
							title: "请选择日期",
							date: dDate,
						});
					})

					//时间选择器	
					doc.getElementById("pickDateBtn2").addEventListener('tap', function() {
						var dDate = new Date();
						plus.nativeUI.pickDate(function(e) {
							var d = e.date;
							plantAndBreedForm.ycdate = d.getFullYear() + "-" + (d.getMonth() + 1) + "-" + d.getDate()
						}, function(e) {
							doc.getElementById("pickDateBtn2").value = '预采收日期'
						}, {
							title: "请选择日期",
							date: dDate,
						});
					})

					//时间选择器	
					doc.getElementById("pickDateBtn3").addEventListener('tap', function() {
						var dDate = new Date();
						plus.nativeUI.pickDate(function(e) {
							var d = e.date;
							plantAndBreedForm.bcdate = d.getFullYear() + "-" + (d.getMonth() + 1) + "-" + d.getDate()
						}, function(e) {
							doc.getElementById("pickDateBtn3").value = '必采收日期'
						}, {
							title: "请选择日期",
							date: dDate,
						});
					})

					//表单类型选择器	
					var _getParam = function(obj, param) {
						return obj[param] || '';
					};

		

					//等级选择器	
					axios({
						method: 'POST',
						url: sever + '/leveljson',
						params: {},
						responseType: 'json',
					}).then(function(result) {
						level = result.data.data
						var levelPicker = new $.PopPicker();
						levelPicker.setData(level);
						var showLevelPickerButton = doc.getElementById('showLevelPicker');

						showLevelPickerButton.addEventListener('tap', function(event) {

							levelPicker.show(function(items) {
								showLevelPickerButton.value = _getParam(items[0], 'text')
								plantAndBreedForm.level = _getParam(items[0], 'value')
							});
						}, false);

					})

					//养殖品类选择器	
					axios({
						method: 'POST',
						url: sever + '/breedjson',
						params: {},
						responseType: 'json',
					}).then(function(result) {

						breed = result.data.data

						var breedPicker = new $.PopPicker({
							layer: 2
						});
						breedPicker.setData(breed);
						var breedPickerButton = doc.getElementById('breedPicker');
						breedPickerButton.addEventListener('tap', function(event) {

							breedPicker.show(function(items) {
								breedPickerButton.value = _getParam(items[0], 'text') + " " + _getParam(items[1], 'text');
								plantAndBreedForm.acqbreedid.push(_getParam(items[0], 'value'))
								plantAndBreedForm.acqbreedid.push(_getParam(items[1], 'value'))
							});
						}, false);
					})

					//种植面积单位选择器	
					axios({
						method: 'POST',
						url: sever + '/plantAreaJson',
						params: {},
						responseType: 'json',
					}).then(function(result) {

						var picker = new $.PopPicker();
						picker.setData(result.data.data);
						var plantAreaPickerButton = doc.getElementById('plantAreaPicker');
						plantAreaPickerButton.addEventListener('tap', function(event) {
							picker.show(function(items) {
								plantAndBreedForm.plantArea = _getParam(items[0], 'value')
								plantAndBreedForm.plantAreaName = _getParam(items[0], 'text')
							});
						}, false);
					})

					//产量单位选择器
					axios({
						method: 'POST',
						url: sever + '/returnUnitJson',
						params: {},
						responseType: 'json',
					}).then(function(result) {

						var returnUnit = new $.PopPicker();
						returnUnit.setData(result.data.data);
						var returnUnitPickerButton = doc.getElementById('returnUnitPicker');
						returnUnitPickerButton.addEventListener('tap', function(event) {

							returnUnit.show(function(items) {

								plantAndBreedForm.returnUnit = _getParam(items[0], 'value')
								plantAndBreedForm.returnUnitName = _getParam(items[0], 'text')
							});
						}, false);
					})

					//种植品类选择器	
					axios({
						method: 'POST',
						url: sever + '/plantjson',
						params: {},
						responseType: 'json',
					}).then(function(result) {

						plant = result.data.data

						var plantPicker = new $.PopPicker({
							layer: 2
						});
						plantPicker.setData(plant);
						var plantPickerButton = doc.getElementById('plantPicker');
						plantPickerButton.addEventListener('tap', function(event) {

							plantPicker.show(function(items) {
								plantPickerButton.value = _getParam(items[0], 'text') + " " + _getParam(items[1], 'text');
								plantAndBreedForm.acqplantid.push(_getParam(items[0], 'value'))
								plantAndBreedForm.acqplantid.push(_getParam(items[1], 'value'))
							});
						}, false);
					})

				});
			})(mui, document);
		</script>
	</body>

</html>